<template>
  <div>
    <!--导航栏-->
    <div class="a2">
      <div class="a7">
        <div class="a3">
          <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
          <div class="a5">
            <button class="a5a">
              <router-link :to="'Home'">首页</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'MyActive'">我的活动</router-link>
            </button>
            <button class="a5a">我的部落</button>
            <button class="a5a">
              <router-link :to="'MyInfo'">个人信息</router-link>
            </button>
            <button class="a5a">
              <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
            </button>
            <button class="a5a">APP下载</button>
          </div>
          <div class="a6">
            <div style="width: 300px"></div>
            <div class="a6a"></div>
            <div class="a6a"></div>
            <div class="a6aa"></div>
          </div>
        </div>
      </div>
    </div>

    <!--<div style="position: absolute;margin-top: 80px;width: 100%">-->
      <!--<el-menu-->
        <!--:default-active="toIndex"-->
        <!--class="el-menu-demo"-->
        <!--mode="horizontal"-->
        <!--@select="handleSelect"-->

        <!--text-color="#000000"-->
        <!--active-text-color="#0084ff"-->
        <!--style="flex:1"-->
      <!--&gt;-->
        <!--<el-menu-item v-for="(item, index) in itemList" :key="index" :index="item.path">-->
            <!--<span slot="title"> {{ item.title }}</span>-->
        <!--</el-menu-item>-->
      <!--</el-menu>-->
      <!--<el-main>-->
        <!--<router-view></router-view>-->
      <!--</el-main>-->

    <!--</div>-->

    <!--标签页-->
    <div class="d1">
      <div class="d2">
        <div class="d3">
          <button class="d7" @click="getTribeList(1)">全部部落</button>
          <button class="d7" @click="getTribeList(2)">我加入的</button>
          <button class="d7"></button>
          <button class="d7"></button>
          <button class="d7"></button>
          <button class="d7"></button>
        </div>
        <div class="d4"></div>
      </div>
      <div class="d6"></div>


      <div class="l1"  v-for="item in tribeList"   :key="item.id" >
        <div class="l2" >
          <div class="l3" >
            <div class="l4">
              <img :src="item.photopath" style="width: 175px; height: 175px; border-radius: 10px" alt="" @click="getDetail(item.id)">
            </div>
            <div class="l5">
              <div class="l6">{{item.name}}</div>
              <div class="l8"></div>
              <div class="l9">人数：{{item.count}}</div>
              <div class="l9"></div>
              <div class="l9"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--页尾-->
    <div class="c1">
      <div class="c2">
        <div class="c3">
          <div>到梦简介</div>
          <div>到梦协议</div>
          <div>到梦服务</div>
          <div>第二课堂全国活动查询</div>
          <div>第二课堂全国活动证书查询</div>
          <div>校企共建</div>
          <div>问题与帮助</div>
          <div>联系我们</div>
          <div>APP使用说明</div>
          <div>盗梦空间使用章程和制度</div>
        </div>
        <div class="c4"></div>
        <div class="c5">
          <div>京公网安备11010802024175 到梦空间系统</div>
          <div>2016-2021 Copyright©全国共青团研究中心</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
        name: "MyTribe",
      data() {
        return {
          tribeList:[],
          sid:'',
        };
      },

      methods: {
        handleSelect(path){  // 切换菜单栏
          this.$router.push({
            path: path
          });
        },
        getDetail(id){
          this.$router.push({ path: '/front/TribalDetails', query: { sid: this.sid, id: id } });
        },
        getTribeList(id){
          this.user= JSON.parse(sessionStorage.getItem("user1"))
          this.$axios.post("/tribe/getTribeList1?id="+id+"&uid="+this.user.id).then(resp=>{
              this.tribeList=resp.data
          })
          this.sid=id
        }
      },
      created() {
          this.getTribeList(1)

      }
    }
</script>

<style scoped>
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;
    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }

  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .d1{
    margin-top: 80px;
    width: 100%;
    position: absolute;
    font-size: 13px;
  }
  .d2{
    margin: auto;
    width: 1210px;
    display: flex;
  }
  .d3{
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .d4{
    flex: 1;
  }
  .d5{
    width: 230px;
    display: flex;
    justify-content: space-between;
  }
  .d6{
    border-bottom: 1px solid gainsboro;
    width: 1210px;
    margin: auto;
  }
  .d7{
    height: 55px;
    cursor: pointer;
  }
  .d7:active{
    color: orange;
    border-bottom: 2px solid orange;
  }
  .d7:focus{
    color: orange;
    border-bottom: 2px solid orange;
  }
  .d8>button{
    border-radius: 15px;
    height: 30px;
    width: 110px;
    display: grid;
    align-items: center;
    justify-items: center;
    background: #F2BB64;
    color: white;
    cursor: pointer;
  }
  .d9>button{
    border-radius: 15px;
    height: 30px;
    width: 90px;
    display: grid;
    align-items: center;
    justify-items: center;
    background: #F2BB64;
    color: white;
    cursor: pointer;
  }

  .c1{
    background: #D6D8DA;
    margin-top: 1700px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }
  .d1{
    margin-top: 80px;
    width: 100%;
    position: absolute;
    font-size: 12px;
  }
  .d2{
    margin: auto;
    width: 1210px;
    display: flex;
  }
  .d3{
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .d4{
    flex: 1;
  }
  .d5{
    width: 230px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .d6{
    border-bottom: 1px solid gainsboro;
    width: 1210px;
    margin: auto;
  }
  .d7{
    height: 55px;
    cursor: pointer;
  }
  .d7:active{
    color: orange;
    border-bottom: 2px solid orange;
  }
  .d7:focus{
    color: orange;
    border-bottom: 2px solid orange;
  }
  .d8>button{
    border-radius: 15px;
    height: 30px;
    width: 110px;
    display: grid;
    align-items: center;
    justify-items: center;
    background: #F2BB64;
    color: white;
    cursor: pointer;
  }
  .d9>button{
    border-radius: 15px;
    height: 30px;
    width: 90px;
    display: grid;
    align-items: center;
    justify-items: center;
    background: #F2BB64;
    color: white;
    cursor: pointer;
  }

  .c1{
    background: #D6D8DA;
    margin-top: 1200px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }

  .l1{
    width: 1210px;
    margin: auto;
    margin-top: 20px;
    cursor: pointer;
    display: flex;

  }
  .l2{
    border: 1px solid gainsboro;
    width: 100%;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .l2:hover{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .l3{
    display: flex;
    justify-content: space-around;
    height: 180px;
    width: 100%;
  }
  .l4{
    width: 300px;
    height: 100%;
  }
  .l5{
    width: 800px;
    height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .l6{
    font-size: 14px;
    color:black;
    font-weight: bold;
    font-size: 18px;
  }
  .l8{
    color: gray;
  }
</style>
